<template>
  <div class="app-container">
    <!-- 课程信息表单 todo -->
    <div class="courseInfo">
      <div style="margin: 20px auto;">
        <img :src="coursePublishBody.cover" />
      </div>

      <div>
        <h2>{{ coursePublishBody.title }}</h2>
        <p>
          共<span style="color: blue;">{{ coursePublishBody.lessonNum }}</span
          >课时
        </p>
        <p>
          所属分类：{{ coursePublishBody.subjectParentTitle }}>{{
            coursePublishBody.subjectTitle
          }}
        </p>
        <p>课程讲师：{{ coursePublishBody.teacherName }}</p>
        <h3 style="color: red;">价格：￥{{ coursePublishBody.price }}</h3>
      </div>
    </div>

    <div style="text-align:center;">
      <el-button type="primary" @click="prev()">上一步</el-button>
      <el-button
        type="primary"
        :disabled="publishBtnDisabled"
        @click="publish()"
        >发布课程</el-button
      >
    </div>
  </div>
</template>

<script>
import course from "../../../api/course";
export default {
  data() {
    return {
      publishBtnDisabled: false,
      coursePublishBody: {}, //课程信息
    };
  },
  created() {
    if (this.$parent.courseId) {
      this.initCoursePublish(this.$parent.courseId);
    }
  },
  methods: {
    /**
     * 初始化要发布的课程信息
     * @param {*} id
     */
    initCoursePublish(id) {
      course.getCoursePublishById(id).then((resp) => {
        if (resp) {
          this.coursePublishBody = resp.data.item;
          console.log(this.coursePublishBody);
        }
      });
    },
    prev() {
      this.$parent.active = 1;
    },
    publish() {
      this.publishBtnDisabled = true;
      course.publishCourse(this.$parent.courseId).then((resp) => {
        this.$parent.active = 3; // 访问父组件成员 $parent
        this.$message.success(resp.message);
        this.$router.replace({ path: "/course/list" });
      });
    },
  },
};
</script>

<style>
.courseInfo {
  /* box-shadow: 0px 0px 5px 5px #a1a3a6; */
  width: 800px;
  height: 580px;
  margin: 0px auto;
}
</style>
